import React, { Component } from 'react'
import axios from 'axios'
import {connect} from 'react-redux'
import {getUsersData} from '../../redux/actions/List'

class Header extends Component {
    handleBtn = () => {
        const {inputSearch:{value:nameValue}} = this
        // store.dispatch(getUsersData({isFirst:false,isLoading:true}))
        this.props.get({isFirst:false,isLoading:true})
        axios.get(`http://localhost:3000/api1/search/users?q=${nameValue}`).then((res)=>{
            // store.dispatch(getUsersData({list:res.data.items,isLoading:false}))
            this.props.get({list:res.data.items,isLoading:false})

        })
    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={c=>this.inputSearch=c} type="text" placeholder="enter the name you search"/>
                    &nbsp;
                    <button onClick={this.handleBtn}>Search</button>
                </div>
            </section>
        )
    }
}

export default connect(
    state => ({state}),
    dispatch => ({
        get: dataObj => dispatch(getUsersData(dataObj))
    })
)(Header)